<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="popup.css">
</head>

<body>
    <div class="container">
        <header>
            <div class="logo">
                <div class="logo-icon">翻译</div>
                <h1>百度翻译插件</h1>
            </div>
            <button class="settings-btn" id="settingsBtn">⚙️</button>
        </header>

        <div class="main-content" id="mainPanel">
            <div class="input-section">
                <textarea id="sourceText" placeholder="请输入要翻译的文本..."></textarea>
                <div class="language-selectors">
                    <select id="sourceLang">
                        <option value="auto">自动检测</option>
                        <option value="zh">中文</option>
                        <option value="en">英语</option>
                        <option value="jp">日语</option>
                        <option value="kor">韩语</option>
                    </select>
                    <button class="swap-btn" id="swapBtn">⇄</button>
                    <select id="targetLang">
                        <option value="zh">中文</option>
                        <option value="en">英语</option>
                        <option value="jp">日语</option>
                        <option value="kor">韩语</option>
                    </select>
                </div>
                <button class="translate-btn" id="translateBtn">
                    <span id="btnText">翻译</span>
                    <span id="btnLoading" class="loading" style="display:none;"></span>
                </button>
            </div>

            <div class="result-section">
                <div class="result-box">
                    <div class="result-placeholder" id="resultPlaceholder">翻译结果将显示在这里</div>
                    <div id="translatedText"></div>
                    <div id="errorMessage" class="error-message"></div>
                </div>
            </div>

            <div class="history-section">
                <div class="history-header">
                    <span class="history-title">翻译历史</span>
                    <button class="clear-history-btn" id="clearHistoryBtn">清除</button>
                </div>
                <div id="historyList" class="history-list">
                    <!-- 历史记录将通过JS动态添加 -->
                </div>
            </div>
        </div>

        <div class="settings-panel" id="settingsPanel" style="display:none;">
            <div class="settings-title">API设置</div>
            <div class="form-group">
                <label for="appId">App ID</label>
                <input type="text" id="appId" placeholder="请输入百度翻译API App ID">
            </div>
            <div class="form-group">
                <label for="appKey">密钥</label>
                <input type="text" id="appKey" placeholder="请输入百度翻译API密钥">
            </div>
            <div class="action-buttons">
                <button class="save-btn" id="saveSettingsBtn">保存</button>
                <button class="cancel-btn" id="cancelSettingsBtn">取消</button>
            </div>
        </div>
    </div>

    <script src="popup.js"></script>
</body>

</html>